<template>
  <div class="full-screen-card">
    <div class="card-content">
      <div class="card-header">
        <h1>二手商品管理员档案</h1>
        <span class="librarian-badge">资深管理员</span>
      </div>
      <div class="info-section">
        <div class="info-row">
          <div class="info-item">
            <span class="label">姓名</span>
            <span class="value">陈凯</span>
          </div>
          <div class="info-item">
            <span class="label">性别</span>
            <span class="value">男</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">入职时间</span>
            <span class="value">2020年3月12日</span>
          </div>
          <div class="info-item">
            <span class="label">职位</span>
            <span class="value">二手商品运营主管</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">管理范围</span>
            <span class="value">
              3C数码区（手机/电脑/相机）<br>
              线下仓库A区（1000㎡）
            </span>
          </div>
          <div class="info-item">
            <span class="label">核心职责</span>
            <span class="value">
              商品质检/定价/上下架管理<br>
              售后纠纷处理/库存调度
            </span>
          </div>
        </div>
        <div class="info-item wide">
          <span class="label">专业资质</span>
          <span class="value">
            国家注册二手商品评估师（中级）<br>
            电子商务师职业资格证书<br>
            供应链管理师培训认证
          </span>
        </div>
        <div class="info-item wide">
          <span class="label">业务数据</span>
          <span class="value">
            累计处理商品：8500+件<br>
            质检通过率：98.7%<br>
            客户满意度：96%
          </span>
        </div>
        <div class="info-item wide">
          <span class="label">联系方式</span>
          <span class="value">
            021-66688888 | chenkai@secondmall.com<br>
            值班时段：周二/四/六 09:30-18:00<br>
            紧急联系：13812345678（微信同号）
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.full-screen-card {
  width: 70vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-content {
  background: white;
  width: 90%;
  max-width: 1000px;
  min-height: 500px;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-header {
  text-align: center;
  margin-bottom: 40px;
}

.card-header h1 {
  font-size: 36px;
  font-weight: 600;
  color: #2d3748;
}

.librarian-badge {
  display: inline-block;
  background: #3182ce; /* 蓝色徽章，更符合电商风格 */
  color: white;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 16px;
  margin-top: 10px;
  letter-spacing: 0.8px;
}

.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item.wide {
  flex: 2;
}

.label {
  font-size: 18px;
  color: #4a5568;
  font-weight: 500;
}

.value {
  font-size: 22px;
  color: #1a202c;
  font-weight: 400;
  line-height: 1.6;
}

.value br {
  display: block;
  margin: 8px 0;
}
</style>